
<template>
  <div id="app" style="height:100%">
    <view-box>
        <tabbar slot="bottom"  v-model="tabIndex" >
          <template  v-for="(item,index) in tab">
            <tabbar-item :link="item.link" :key="index" >
              <img slot="icon" :src="item.icon">
              <img slot="icon-active" :src="item.icon_active">
              <span slot="label">{{item.label}}</span>
            </tabbar-item>
          </template>
      </tabbar>
      <router-view/>
    </view-box>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      tabIndex:0,
      tab:[
        {
          link:'/good-detail',
          icon:require('./assets/images/icon-product.png'),
          icon_active:require('./assets/images/icon-product-active.png'),
          label:'商品'
        },
        {
          link:'/good-order',
          icon:require('./assets/images/icon-order.png'),
          icon_active:require('./assets/images/icon-order-active.png'),
          label:'订单'
        },
      ]

    }

  },
  watch:{
    $route(to,from){
        this.tabIndex = this.tab.findIndex((v)=>v.link===to.path)
    }
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/close.less';
@import '~vux/src/styles/1px.less';
@import './assets/style/main.less';


</style>
